<style scoped>
.layui-form>>>.layui-form-select {
    z-index: inherit;
}
</style>

<template>
<div class="company">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>添加库间</legend>
    </fieldset>

    <form class="layui-form ">
        <input type="hidden" id="code" name="code">
        <div class="layui-form-item">
            <label class="layui-form-label">库房名称:</label>
            <div class="layui-input-block">
                <select class="layui-select" lay-verify="required" lay-filter="room" name="storeguid">
                    <option value="">请选择</option>
                    <option v-for="(emnu, i) in storerooms"  :value="emnu.guid">{{emnu.name}}</option>
                </select>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库间编码: </label>
            <div class="layui-input-block" style="width: 300px">
                <select class="layui-form-select" id="code1" name="code1">
                    <option :value="checkObjNull(storeroom).code">一级库房({{checkObjNull(storeroom).code}})</option>
                    <option v-for="(item, index) in storehouserooms" :value="item.code">{{item.name}}({{item.code}})</option>
                </select>
                <div style="width: 50px; position: absolute;left: 310px;top: 9px;font-size:20px"> +</div>
                <input type="number" v-model="codeJ" @change="checkNum()" id="code2" name="code2" required lay-verify="required" style="width: 170px; position: absolute;left: 330px;top: 0px;" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库间名称:</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">库间类型:</label>
            <div class="layui-input-block">
                <select class="layui-select" lay-verify="required" id="shrtype" lay-filter="shrtype" name="shrtype">
                    <option value="">请选择</option>
                    <option   v-for="(item, i) in types" :value="item.dictkey" :selected="item.dictkey == storehouseroom.shrtype">{{item.dicttext}}</option>
                </select>
            </div>
        </div>

       <!-- <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">管理人员:</label>
            <div class="layui-input-block">
                <input type="text" name="HandoverCompany" placeholder="请选择管理人员" value="" id="HandoverCompany" class="layui-input" style="position:absolute;width:80%;"  onkeyup="search()" autocomplete="off">
                <select type="text" name="managerid" id="hc_select" lay-filter="hc_select" autocomplete="off"  class="layui-select" lay-search>
                    <option value="">请输入用户名称</option>
                </select>
            </div>
        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">库间容量(吨)</label>
            <div class="layui-input-inline">
                <input type="text" name="capacity"  placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <input type="text" name="remark"  placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
            </div>
        </div>
    </form>
</div>
</template>

<script>
export default {
    name: 'AddStorehouseroomF',

    data() {
        return {
            storerooms: [],
            storeroom: '',
            storehouserooms: [],
            storehouseroom: '',
            codeJ: '',
            types: []
        }
    },
    mounted() {
        let that = this;
        var form = layui.form;
        // that.loadUser();
        that.loadSelect();
        that.loadRooms();
        that.loadEmnu();

        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            form.render();
            form.on('submit(submit)', function (fdata) {
                let loader = layer.load();
                $.ajax({
                    url: '/repository/Storehouseroom!insertVUEPC.action',
                    data: fdata.field,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        console.log('inser storerooms result ', res)
                        if (res.info == "ok") {
                            that.toast("添加成功");
                            that.$parent.switchPage('StorehouseroomF');
                        } else {
                            that.toast(res.errorMsg);
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
                return false;
            });
            form.on('select(room)', function (data) {
                that.storeroom = that.storerooms.filter(item => {
                    return item.guid == data.value;
                })[0];
                that.loadHouses(data.value);
            });
            //选中的时候需要把库检编码也要放入其中
            // form.on('select(shr)', function (data) {
            //     that.codeJ = data.value
            // })
        });

    },
    updated() {
        layui.form.render('select');
        layui.form.render();
    },
    methods: {
        //加载用户权限信息
       /* loadUser: function () {
            $.ajax({
                url: '/repository/Storehouseroom!getManager.action',
                type: "post",
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    if (res != undefined && res.info != undefined) {
                        var data = res.info;
                        $.each(data, function (index, item) {
                            $('#hc_select').append(new Option(item.realname + "(" + item.telphone + ")", item.guid)); // 下拉菜单里添加元素
                        });
                        layui.form.render("select");

                    } else {
                        alert("系统错误");
                    }
                }
            });
        },*/
        loadSelect: function () {
            layui.use(['form', 'layedit', 'upload'], function () {
                var form = layui.form
                form.on('select(hc_select)', function (data) { //选择移交单位 赋值给input框
                    $("#HandoverCompany").val(data.value);
                    $("#hc_select").next().find("dl").css({
                        "display": "none"
                    });
                    form.render();

                });

                window.search = function () {
                    var value = $("#HandoverCompany").val();
                    $("#hc_select").val(value);
                    form.render();
                    $("#hc_select").next().find("dl").css({
                        "display": "block"
                    });
                    var dl = $("#hc_select").next().find("dl").children();
                    var j = -1;
                    for (var i = 0; i < dl.length; i++) {
                        if (dl[i].innerHTML.indexOf(value) <= -1) {
                            dl[i].style.display = "none";
                            j++;
                        }
                        if (j == dl.length - 1) {
                            $("#hc_select").next().find("dl").css({
                                "display": "none"
                            });
                        }
                    }

                }
            });
        },
        loadRooms: function () {

            var that = this;
            $.ajax({
                url: '/repository/Storeroom!getStoreroomJson.action',
                type: "post",
                dataType: "json",
                data: {type: 2},
                success: function (res) {
                    if (res.info != undefined) {
                        that.storerooms = res.info;
                    }
                }
            });
        },
        loadHouses: function (data) {
            var that = this;
            $.ajax({
                url: '/repository/Storehouseroom!getAll.action',
                type: "post",
                dataType: "json",
                data: {
                    storeguid: data
                },
                success: function (res) {
                    that.storehouserooms = res.info;
                }
            });
        },
        checkNum(data) {
            var code2 = $('#code2').val();
            var code1 = $('#code1').val();

            if (code1 == null || code1 == "") {
                code1 = "";
            }
            if(code2.length != 3){
                $('#code2').val('');
                this.toast("编码长度必须为三位!");
            }else{
                var code = code1 + code2;
                //检查是否已存在编码
                this.checkRE(code)
                $('#code').val(code);
            }
        },
        checkRE(codeVal) {
            var that = this;
            console.log("数据是啥",codeVal);
            $.ajax({
                url: '/repository/Storehouseroom!list.action',
                type: "post",
                dataType: "json",
                data: {
                    code: codeVal
                },
                success: function (res) {
                    console.log(res)
                    if ((res.rows.length != 0)) {
                        that.toast("输入库间编码已存在，请重新输入！");
                        $('#code2').val("");
                    }
                }
            });
        },
        loadEmnu: function () {
            var that = this;
            $.ajax({
                url: '/sales/Sellform!getDictEmnu.action',
                type: "post",
                dataType: "json",
                data: {
                    dicttype: "22"
                },
                success: function (res) {
                    if (res.info != undefined) {
                        that.types = res.info;
                    }
                }
            });
        },
    }
}
</script>
